(function () {
    return {
        initControl: function (oControl) {
            var v = oControl.value;
            oControl.isContainer = true;
            v.activeIndex=0;
        },
        compile: function (compileContext, doc,entity) {
            var cc = compileContext;
            var tc = cc.templateCoder;

            var v = entity.value;
            var cls = ["tabs"];

            var indexData = "tabs"+cc.newID();
            cc.dataCoder.add(""+indexData+":"+v.activeIndex);

            tc.add("<div class=\"");
            tc.add(cls.join(" "));
            tc.add("\"");
            tc.add(">");
            tc.add("<ul>");
            for(var i=0;i<entity.children.length;i++){
                var child = entity.children[i];
                tc.add("<li class=\"${"+indexData+"=="+i+"?'is-active':''}\"><a>"+child.value.title+"</a></li>");
            }

            tc.add("</ul>");
            tc.add("</div>");
            for(var j=0;j<entity.children.length;j++){
                var childEntity = entity.children[j];
                tc.add("<div class=\"${"+indexData+"=="+j+"?'':'is-hidden'}\">");
                $.each(childEntity.children, function (ec) {
                    compileContext.compile(ec);
                });
                tc.add("</div>");
            }
        }
    }
})();